import Image from "next/image";

export default function Home() {
  return (
    <div>
      &lt;main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"&gt;
        &lt;Image
          className="dark:invert"
          src="https://nextjs.org/icons/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        /&gt;
        <ol>
          <li>
            Get started by editing{" "}
            <code>
              src/app/page.tsx
            </code>
            .
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>

        <div>
          <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" target="_blank">
            &lt;Image
              className="dark:invert"
              src="https://nextjs.org/icons/vercel.svg"
              alt="Vercel logomark"
              width={20}
              height={20}
            /&gt;
            Deploy now
          </a>
          <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" target="_blank">
            Read our docs
          </a>
        </div>
      &lt;/main&gt;
      &lt;footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center"&gt;
        <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" target="_blank">
          &lt;Image
            aria-hidden
            src="https://nextjs.org/icons/file.svg"
            alt="File icon"
            width={16}
            height={16}
          /&gt;
          Learn
        </a>
        <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" target="_blank">
          &lt;Image
            aria-hidden
            src="https://nextjs.org/icons/window.svg"
            alt="Window icon"
            width={16}
            height={16}
          /&gt;
          Examples
        </a>
        <a href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" target="_blank">
          &lt;Image
            aria-hidden
            src="https://nextjs.org/icons/globe.svg"
            alt="Globe icon"
            width={16}
            height={16}
          /&gt;
          Go to nextjs.org →
        </a>
      &lt;/footer&gt;
    </div>
  );
}
